// Register.tsx
import React, { useState } from "react";
import "./index.less";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, message, Card } from "antd";
import { useNavigate } from "react-router-dom";
import { login, register } from "@/api/user/index";

const Register: React.FC = () => {
  const [repeat, setRepeat] = useState(false);
  const navigate = useNavigate();
  const onFinish = async (values: { username: string; password: string; remember: boolean }) => {
    if (repeat) return;
    setRepeat(true);
    const res = await register(values.username, values.password);
    if (res.code === 200) {
      message.success("注册成功！3s后跳转到登录页");
      setTimeout(() => {
        navigate("/login");
      }, 3000);
    } else {
      message.error(res.msg);
    }
    setTimeout(() => {
      setRepeat(false);
    }, 2000);
  };
  return (
    <>
      <div className="login-container">
        <Card className="login-card">
          <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={onFinish}>
            <Form.Item name="username" rules={[{ required: true, message: "请输入账号" }]}>
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="账号"
                style={{ backgroundColor: "transparent" }}
              />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
                style={{ backgroundColor: "transparent" }}
              />
            </Form.Item>
            <Form.Item>
              <Button type="link" size="small" onClick={() => navigate("/login")} style={{ float: "right" }}>
                去登录
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                注册
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </>
  );
};

export default Register;
